<template>
    <div>
        <el-row>
            <el-col :span="24" style="margin-top: 2rem">
                <el-col :span="1">
                    <div
                         style="text-align: left;  display: inline-block;  height: 1.2rem"
                    ></div>
                </el-col>
                <el-col :span="23">
                <div>
                    <el-table
                            :data="istrue?PromotionDada:tableData"
                            style="width:98%">
                        <el-table-column
                                label="促销内容"
                                style="text-align: left; "
                        >
                            <template slot-scope="scope">
                                <a style="margin-left: 10px" @click="goodsList" class="neirong">{{ scope.row.neirong }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="时间"
                        width="400">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.time }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                    <!--        =====下面是分页-->
                    <el-row :gutter="20" class="main-t elRow">
                        <el-col :span="0.5"><div class="el"></div></el-col>
                        <el-col :span="23">
                            <div class="bottom">
                                <div class="total">
                                    共计：{{vuexData.length}}条
                                </div>
                                <div class="fenye">
                                    <el-pagination
                                            background
                                            layout="prev, pager, next"
                                            :total="vuexData.length"
                                            :page-size="5"
                                            :pager-count="7"
                                            @current-change="changePage">
                                    </el-pagination>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="0.5"><div class="el"></div></el-col>
                    </el-row>
                </el-col>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    export default {
        name: "Promotion",
        data(){
            return{
                tableData:[],   //当前页数据
                istrue:true,
                currentPage:1,
                vuexData:[],//vuex里面的数据
            }
        },
        created(){
            this.DataGetPromotion().then(res => {
                this.vuexData =this.$store.state.getPromotion.PromotionDada
                this.tableData = this.vuexData.slice(0,5)//初始化，第一页，五条

            })
        },
        computed:{
            PromotionDada(){
                return this.tableData
            },
        },
        methods:{
            ...mapActions(['DataGetPromotion']),
            goodsList(){
                this.$router.push("/Main/Goods/GoodsDetails")
            },
            changePage(val){   //分页
                console.log(val)
                this.currentPage = val
                //this.tableData = []
                let startNum = Number(val-1)*5 //开始
                let endNum =val*5 //结束
                this.tableData = this.vuexData.slice(startNum,endNum)
            }
        }
    }
</script>

<style scoped>
    .neirong{
        color: #1596ad;
    }
    .neirong:hover{
        cursor: pointer;
        text-decoration: #1596ad;
        text-decoration:underline;
    }
   /*=========下面是底部*/
   .bottom{
       overflow: hidden;
   }
   .elRow{
       margin: 3rem 0 ;
   }
   .total{
       float: left;
   }
   .fenye{
       text-align: center;
   }
   .el{
       height: 2rem;
   }
</style>